<template>
  <button class="addition-button">
    <svg-icon icon-class="addition" @click="onAddition"></svg-icon>
  </button>
  <div class="shortshot">
    <div class="shortshot__title">Spent this week</div>
    <div class="shortshot__content">
      <span class="content content--gray">$</span>
      <span class="content content--big">292</span>
      <span class="content">.50</span>
    </div>
  </div>

  <div class="recodes-list">
    <p class="recode-item-title">
      <span>Today</span>
      <span>$7.24</span>
    </p>
    <ul class="recode-item-list">
      <li class="item">
        <div class="main-content">
          <span>Pets</span>
          <span>$3.35</span>
        </div>
        <div class="time">8:54 AM</div>
      </li>
    </ul>
  </div>
</template>
<style lang="scss">
.addition-button {
  position: fixed;
  top: 4vw;
  right: 4vw;
  background-color: rgb(30, 30, 30);
  border-radius: 50%;
  border: none;
  outline: none;
  width: 10vw;
  height: 10vw;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 4vw;
    height: 4vw;
    text-align: center;
    vertical-align: middle;
  }
}
.shortshot {
  height: 30vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.shortshot__title {
  color: rgb(100, 100, 100);
  font-weight: bold;
}
.shortshot__content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 1vh;
}
.shortshot__content .content {
  color: rgb(48, 47, 47);
}
.shortshot__content .content--big {
  font-size: 2.2em;
  margin: 0 5px;
}
.shortshot__content .content--gray {
  color: rgb(100, 100, 100);
}
.recodes-list {
  margin: 0 4vh;
}
.recode-item-title {
  display: flex;
  justify-content: space-between;
  color: rgb(100, 100, 100);
  padding: 0.8em 0;
  border-bottom: 1px solid rgba(100, 100, 100, 0.5);
}
.recode-item-list {
  list-style: none;
  padding: 0;
}
.item {
  font-weight: bold;
  .main-content {
    color: black;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
  }
  .time {
    display: flex;
    justify-content: flex-start;
    font-size: 0.9em;
    margin-top: 0.8em;
    padding-bottom: 0.8em;
    border-bottom: 1px solid rgba(100, 100, 100, 0.5);
    color: rgba(100, 100, 100, 0.5);
  }
}
</style>
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
let router = useRouter();
let route = useRoute();
const onAddition = function () {
  router.push("/addition");
};
</script>
